<%--
  Created by IntelliJ IDEA.
  User: xj
  Date: 2020/2/22
  Time: 15:44
  desc:
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>PAYNA</title>
    <meta name="robots" content="noindex, follow"/>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.png">

    <!-- CSS
	============================================ -->

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
    <!-- Icon Font CSS -->
    <link rel="stylesheet" href="assets/css/vendor/font-awesome.css">
    <link rel="stylesheet" href="assets/css/vendor/themify.css">
    <!-- othres CSS -->
    <link rel="stylesheet" href="assets/css/plugins/animate.css">
    <link rel="stylesheet" href="assets/css/plugins/owl-carousel.css">
    <link rel="stylesheet" href="assets/css/plugins/slick.css">
    <link rel="stylesheet" href="assets/css/plugins/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/plugins/jquery-ui.css">
    <link rel="stylesheet" href="assets/css/plugins/easyzoom.css">
    <link rel="stylesheet" href="assets/css/plugins/select2.min.css">
    <!-- Revolution Slider CSS -->
    <link rel="stylesheet" href="assets/js/revolution/css/settings.css">
    <link rel="stylesheet" href="assets/js/revolution/css/navigation.css">
    <link rel="stylesheet" href="assets/js/revolution/custom-setting.css">

    <link rel="stylesheet" href="assets/css/style.css">

</head>

<body>

<div class="main-wrapper main-wrapper-2">
    <header class="header-area header-padding-1">
        <div class="main-header-wrap transparent-bar">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col-lg-3">
                        <div class="logo-header-about-wrap white-header">
                            <div class="logo logo-width">
                                <a href="index.html"><img src="assets/images/logo/logo-white.png" alt="logo"></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 d-flex justify-content-center">
                        <div class="main-menu menu-lh-1 menu-white">
                            <%--导航条--%>
                            <nav>
                                <ul>
                                    <li><a class="active" href="#">首页 <i class="fa"></i></a>
                                    </li>
                                    <li><a href="#">商品 <i class="fa fa-angle-down"></i></a>
                                        <ul class="mega-menu mega-menu-width2 menu-negative-mrg2">
                                            <li class="mega-menu-sub-width20"><a class="menu-title" href="#">商品布局</a>
                                                <ul>
                                                    <li><a href="shop-4col.jsp">商品布局1</a></li>
                                                    <li><a href="#">商品布局2</a></li>
                                                    <li><a href="#">商品布局3</a></li>
                                                    <li><a href="#">商品布局4</a></li>
                                                    <li><a href="#">经典系列</a></li>
                                                    <li><a href="#">现代系列</a></li>
                                                </ul>
                                            </li>
                                            <li class="mega-menu-sub-width20"><a class="menu-title" href="#">产品布局</a>
                                                <ul>
                                                    <li><a href="product-details.jsp">简单</a></li>
                                                    <li><a href="#">产品分组</a></li>
                                                    <li><a href="#">产品周边</a></li>
                                                </ul>
                                            </li>
                                            <li class="mega-menu-sub-width20"><a class="menu-title" href="#">商品页</a>
                                                <ul>
                                                    <li><a href="cart.jsp">购物车</a></li>
                                                    <li><a href="checkout.jsp">结算单</a></li>
                                                    <li><a href="#">我的账户</a></li>
                                                    <li><a href="#">心愿单</a></li>
                                                    <li><a href="#">订单跟踪</a></li>
                                                </ul>
                                            </li>
                                            <li class="mega-menu-sub-width37">
                                                <div class="banner-menu-content-wrap default-overlay">
                                                    <a href="product-details.html"><img
                                                            src="assets/images/banner/banner-menu.jpg" alt="banner"></a>
                                                    <div class="banner-menu-content">
                                                        <span>你好，夏天 2020</span>
                                                        <h2>新的 <br>开始</h2>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a href="shop-fullwide.html">收藏 </a></li>
                                    <li><a href="#">关于<i class="fa fa-angle-down"></i></a>
                                        <ul class="sub-menu-width">
                                            <li><a href="#">关于我们</a></li>
                                            <li><a href="#">介绍我们</a></li>
                                            <li><a href="#">即将上新</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="blog.html">博客 <i class="fa fa-angle-down"></i></a>
                                        <ul class="sub-menu-width">
                                            <li><a href="#">博客侧边栏</a></li>
                                            <li><a href="#">博客无边栏</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">上新产品 </a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="lang-cart-search-wrap">
                            <div class="language white-language mr-55">
                                <ul>
                                    <li><a href="#">英语</a></li>
                                    <li><a class="active" href="#">中文</a></li>
                                </ul>
                            </div>
                            <div class="same-style header-search white-search">
                                <a class="search-active" href="#"><i class="ti-search"></i></a>
                            </div>
                            <div class="same-style cart-wrap ml-20 white-cart">
                                <a href="#" class="cart-active">
                                    <i class=" ti-user "></i>
                                    <%--                                    登录之后就会出现这个数字--%>
                                    <span class="count-style">111</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-small-mobile header-small-mobile-ptb">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-6">
                        <div class="mobile-logo logo-width">
                            <a href="index.html">
                                <img alt="" src="assets/images/logo/logo.png">
                            </a>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="mobile-header-right-wrap">
                            <div class="same-style cart-wrap">
                                <a href="#" class="cart-active">
                                    <i class=" ti-shopping-cart "></i>
                                    <span class="count-style">2</span>
                                </a>
                            </div>
                            <div class="mobile-off-canvas">
                                <a class="mobile-aside-button" href="#"><i class=" ti-align-left "></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- 侧边栏购物车 -->
    <div class="sidebar-cart-active">
        <div class="sidebar-cart-all">
            <a class="cart-close" href="#"><i class=" ti-close"></i></a>
            <div class="cart-content">
                <h3>购物车</h3>
                <ul>
                    <li class="single-product-cart">
                        <div class="cart-img">
                            <a href="#"><img src="assets/images/cart/cart-1.jpg" alt=""></a>
                        </div>
                        <div class="cart-title">
                            <h4><a href="#">High Collar Jacket</a></h4>
                            <span>1 × $50.00</span>
                        </div>
                        <div class="cart-delete">
                            <a href="#">×</a>
                        </div>
                    </li>
                </ul>
                <div class="cart-total">
                    <h4>总价: <span>$50.00</span></h4>
                </div>
                <div class="cart-checkout-btn">
                    <a class="btn-hover cart-btn-style" href="cart.jsp">购物车详情</a>
                    <a class="no-mrg btn-hover cart-btn-style" href="checkout.jsp">去付款</a>
                </div>
            </div>
        </div>
    </div>
    <div class="slider-area">
        <%--        头部内容1--%>
        <div id="rev_slider_5_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="home-04"
             data-source="gallery"
             style="margin:0px auto;background:transparent;padding:0px;margin-top:0px;margin-bottom:0px;">
            <!-- START REVOLUTION SLIDER 5.4.7 auto mode -->
            <div id="rev_slider_5_1" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.4.7">
                <ul>
                    <!-- SLIDE  -->
                    <li data-index="rs-13" data-transition="fade" data-slotamount="default" data-hideafterloop="0"
                        data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300"
                        data-rotate="0" data-saveperformance="off" data-title="Slide" data-param1="" data-param2=""
                        data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8=""
                        data-param9="" data-param10="" data-description="">
                        <!-- MAIN IMAGE -->
                        <img src="assets/images/slider/img-slide4-01.jpg" alt=""
                             data-bgposition="center center !important" data-bgfit="cover !important"
                             data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
                        <!-- LAYERS -->

                        <!-- LAYER NR. 1 -->
                        <div class="tp-caption     rev_group" id="slide-13-layer-2"
                             data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                             data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
                             data-width="['887','887','687','370']" data-height="['227','227','180','280']"
                             data-whitespace="nowrap" data-type="group" data-responsive_offset="on"
                             data-frames='[{"delay":10,"speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                             data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                             data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                             data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
                             data-paddingleft="[0,0,0,0]"
                             style="z-index: 5; min-width: 887px; max-width: 887px; max-width: 227px; max-width: 227px; white-space: nowrap; font-size: 20px; line-height: 22px; font-weight: 400; color: #ffffff; letter-spacing: 0px;">
                            <!-- LAYER NR. 2 -->
                            <div class="tp-caption   tp-resizeme" id="slide-13-layer-1"
                                 data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                                 data-y="['top','top','top','top']" data-voffset="['0','0','0','0']"
                                 data-fontsize="['24','24','18','18']" data-width="none" data-height="none"
                                 data-whitespace="nowrap" data-type="text" data-responsive_offset="on"
                                 data-frames='[{"delay":"+690","speed":1650,"frame":"0","from":"y:-50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                                 data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                                 data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                                 data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
                                 data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]"
                                 style="z-index: 6; white-space: nowrap; font-size: 24px; line-height: 30px; font-weight: 400; color: #ffffff; letter-spacing: 5px;font-family:Playfair Display;">
                                WELCOME TO
                            </div>

                            <!-- LAYER NR. 3 -->
                            <div class="tp-caption   tp-resizeme" id="slide-13-layer-3"
                                 data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                                 data-y="['middle','middle','middle','middle']" data-voffset="['-20','-20','-20','-20']"
                                 data-fontsize="['60','60','40','40']" data-lineheight="['70','70','70','60']"
                                 data-width="['none','none','none','370']" data-height="['none','none','none','141']"
                                 data-whitespace="['nowrap','nowrap','nowrap','normal']" data-type="text"
                                 data-responsive_offset="on"
                                 data-frames='[{"delay":"+940","speed":1650,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                                 data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                                 data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','center']"
                                 data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
                                 data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]"
                                 style="z-index: 7; white-space: nowrap; font-size: 60px; line-height: 70px; font-weight: 400; color: #ffffff; letter-spacing: 5px;font-family:Playfair Display;">
                                NEWYORK FASHION WEEK
                            </div>

                            <!-- LAYER NR. 4 -->
                            <div class="tp-caption rev-btn " id="slide-13-layer-4"
                                 data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                                 data-y="['bottom','bottom','bottom','bottom']" data-voffset="['0','0','0','0']"
                                 data-width="none" data-height="none" data-whitespace="nowrap" data-type="button"
                                 data-responsive_offset="on" data-responsive="off"
                                 data-frames='[{"delay":"+1220","speed":1650,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(255,255,255);bg:rgb(231,120,120);bc:rgba(0,0,0,1);bw:0 0 0 0;"}]'
                                 data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                                 data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                                 data-paddingtop="[12,12,12,12]" data-paddingright="[35,35,35,35]"
                                 data-paddingbottom="[12,12,12,12]" data-paddingleft="[35,35,35,35]"
                                 style="z-index: 8; white-space: nowrap; font-size: 14px; line-height: 28px; font-weight: 500; color: rgba(255,255,255,1); letter-spacing: 0px;font-family:Montserrat;background-color:rgba(0,0,0,0);border-color:rgb(255,255,255);border-style:solid;border-width:1px 1px 1px 1px;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;">
                                开始购物
                            </div>
                        </div>
                    </li>
                    <!-- SLIDE  -->
                    <li data-index="rs-14" data-transition="fade" data-slotamount="default" data-hideafterloop="0"
                        data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300"
                        data-rotate="0" data-saveperformance="off" data-title="Slide" data-param1="" data-param2=""
                        data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8=""
                        data-param9="" data-param10="" data-description="">
                        <!-- MAIN IMAGE -->
                        <img src="assets/images/slider/img-slide4-02.jpg" alt=""
                             data-bgposition="center center !important" data-bgfit="cover !important"
                             data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
                        <!-- LAYERS -->

                        <!-- LAYER NR. 5 -->
                        <div class="tp-caption     rev_group" id="slide-14-layer-2"
                             data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                             data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
                             data-width="['887','887','687','370']" data-height="['227','227','180','280']"
                             data-whitespace="nowrap" data-type="group" data-responsive_offset="on"
                             data-frames='[{"delay":10,"speed":300,"frame":"0","from":"opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                             data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                             data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                             data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
                             data-paddingleft="[0,0,0,0]"
                             style="z-index: 5; min-width: 887px; max-width: 887px; max-width: 227px; max-width: 227px; white-space: nowrap; font-size: 20px; line-height: 22px; font-weight: 400; color: #ffffff; letter-spacing: 0px;">
                            <!-- LAYER NR. 6 -->
                            <div class="tp-caption   tp-resizeme" id="slide-14-layer-1"
                                 data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                                 data-y="['top','top','top','top']" data-voffset="['0','0','0','0']"
                                 data-fontsize="['24','24','18','18']" data-fontweight="['900','900','400','900']"
                                 data-letterspacing="['3','3','5','5']" data-width="none" data-height="none"
                                 data-whitespace="nowrap" data-type="text" data-responsive_offset="on"
                                 data-frames='[{"delay":"+690","speed":1650,"frame":"0","from":"y:-50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                                 data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                                 data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                                 data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
                                 data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]"
                                 style="z-index: 6; white-space: nowrap; font-size: 24px; line-height: 30px; font-weight: 900; color: #ffffff; letter-spacing: 3px;font-family:Playfair Display;">
                                WELCOME TO
                            </div>

                            <!-- LAYER NR. 7 -->
                            <div class="tp-caption   tp-resizeme" id="slide-14-layer-3"
                                 data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                                 data-y="['middle','middle','middle','middle']" data-voffset="['-20','-20','-20','-20']"
                                 data-fontsize="['60','60','40','40']" data-lineheight="['70','70','70','60']"
                                 data-width="['none','none','none','370']" data-height="['none','none','none','141']"
                                 data-whitespace="['nowrap','nowrap','nowrap','normal']" data-type="text"
                                 data-responsive_offset="on"
                                 data-frames='[{"delay":"+940","speed":1650,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                                 data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                                 data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','center']"
                                 data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
                                 data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]"
                                 style="z-index: 7; white-space: nowrap; font-size: 60px; line-height: 70px; font-weight: 900; color: #ffffff; letter-spacing: 5px;font-family:Playfair Display;">
                                PAYNA FASION 2020
                            </div>

                            <!-- LAYER NR. 8 -->
                            <div class="tp-caption rev-btn " id="slide-14-layer-4"
                                 data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                                 data-y="['bottom','bottom','bottom','bottom']" data-voffset="['0','0','0','0']"
                                 data-width="none" data-height="none" data-whitespace="nowrap" data-type="button"
                                 data-responsive_offset="on" data-responsive="off"
                                 data-frames='[{"delay":"+1220","speed":1650,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(255,255,255);bg:rgb(231,120,120);bc:rgba(0,0,0,1);bw:0 0 0 0;"}]'
                                 data-margintop="[0,0,0,0]" data-marginright="[0,0,0,0]" data-marginbottom="[0,0,0,0]"
                                 data-marginleft="[0,0,0,0]" data-textAlign="['inherit','inherit','inherit','inherit']"
                                 data-paddingtop="[12,12,12,12]" data-paddingright="[35,35,35,35]"
                                 data-paddingbottom="[12,12,12,12]" data-paddingleft="[35,35,35,35]"
                                 style="z-index: 8; white-space: nowrap; font-size: 14px; line-height: 28px; font-weight: 500; color: rgba(255,255,255,1); letter-spacing: 0px;font-family:Montserrat;background-color:rgba(0,0,0,0);border-color:rgb(255,255,255);border-style:solid;border-width:1px 1px 1px 1px;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;">
                                开始购物
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
            </div>
        </div><!-- END REVOLUTION SLIDER -->
    </div>
    <%--    内容2--%>
    <div class="banner-area pt-100 pb-95">
        <div class="custom-container-2">
            <div class="section-title-3 text-center mb-70">
                <h2>新的收藏品</h2>
            </div>
            <div class="banner-slider-active owl-carousel dot-style-1 dot-style-mrg1">
                <div class="banner-wrap default-overlay banner-overlay-1 banner-zoom">
                    <a href="product-details.html"><img src="assets/images/banner/banner-1.jpg" alt="product"></a>
                    <div class="banner-content">
                        <h4>FEMALE FAVORITE COAT</h4>
                        <h2>NEW IN <br>WOMAN</h2>
                    </div>
                </div>
                <div class="banner-wrap default-overlay banner-overlay-1 banner-zoom">
                    <a href="product-details.html"><img src="assets/images/banner/banner-2.jpg" alt="product"></a>
                    <div class="banner-content">
                        <h4>Contrast edges bomber jacket</h4>
                        <h2>NEW IN <br>MAN</h2>
                    </div>
                </div>
                <div class="banner-wrap default-overlay banner-overlay-1 banner-zoom">
                    <a href="product-details.html"><img src="assets/images/banner/banner-2.jpg" alt="banner"></a>
                    <div class="banner-content">
                        <h4>Contrast edges bomber jacket</h4>
                        <h2>NEW IN <br>MAN</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <%--内容3--%>
    <div class="new-trend-area section-padding-2 pb-45">
        <div class="container-fluid padding-30-row-col">
            <div class="section-title-3 text-center mb-70">
                <h2>新的流行趋势</h2>
            </div>
            <div class="row">
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                    <div class="product-wrap mb-55">
                        <div class="product-img default-overlay mb-20">
                            <a href="product-details.html">
                                <img class="default-img" src="assets/images/product/hm-4-pro-1.jpg" alt="">
                                <img class="hover-img" src="assets/images/product/hm-4-pro-1-2.jpg" alt="">
                            </a>
                            <div class="product-action">
                                <a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i
                                        class=" ti-zoom-in"></i><span>Quick Shop</span></a>
                                <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
                                <a title="Compare" href="#"><i class="ti-bar-chart-alt"></i><span>Add to Compare</span></a>
                            </div>
                            <div class="product-action-2">
                                <a title="Buy on Themeforest" href="#">Buy on Themeforest</a>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="product-details.html">Wrap soft fabric blouse</a></h3>
                            <div class="product-price">
                                <span>$29.00</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                    <div class="product-wrap mb-55">
                        <div class="product-img default-overlay mb-20">
                            <a href="product-details.html">
                                <img class="default-img" src="assets/images/product/hm-4-pro-2.jpg" alt="">
                                <img class="hover-img" src="assets/images/product/hm-4-pro-2-2.jpg" alt="">
                            </a>
                            <div class="product-action">
                                <a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i
                                        class=" ti-zoom-in"></i><span>Quick Shop</span></a>
                                <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
                                <a title="Compare" href="#"><i class="ti-bar-chart-alt"></i><span>Add to Compare</span></a>
                            </div>
                            <div class="product-action-2">
                                <a title="Select options" href="#">Select options</a>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="product-details.html">Satin floral dress</a></h3>
                            <div class="product-price">
                                <span>$75.00</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                    <div class="product-wrap mb-55">
                        <div class="product-img default-overlay mb-20">
                            <a href="product-details.html">
                                <img class="default-img" src="assets/images/product/hm-4-pro-3.jpg" alt="">
                                <img class="hover-img" src="assets/images/product/hm-4-pro-3-2.jpg" alt="">
                            </a>
                            <div class="product-action">
                                <a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i
                                        class=" ti-zoom-in"></i><span>Quick Shop</span></a>
                                <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
                                <a title="Compare" href="#"><i class="ti-bar-chart-alt"></i><span>Add to Compare</span></a>
                            </div>
                            <div class="product-action-2">
                                <a title="Add To Cart" href="#">Add to cart</a>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="product-details.html">Slim-fit dark wash Patrick</a></h3>
                            <div class="product-price">
                                <span>$65.00</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                    <div class="product-wrap mb-55">
                        <div class="product-img default-overlay mb-20">
                            <a href="product-details.html">
                                <img class="default-img" src="assets/images/product/hm-1-pro-1.jpg" alt="">
                                <img class="hover-img" src="assets/images/product/hm-1-pro-1-2.jpg" alt="">
                            </a>
                            <div class="product-action">
                                <a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i
                                        class=" ti-zoom-in"></i><span>Quick Shop</span></a>
                                <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
                                <a title="Compare" href="#"><i class="ti-bar-chart-alt"></i><span>Add to Compare</span></a>
                            </div>
                            <div class="product-action-2">
                                <a title="Add To Cart" href="#">Add to cart</a>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="product-details.html">Slim-fit cotton shirt</a></h3>
                            <div class="product-price">
                                <span>$41.00</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                    <div class="product-wrap mb-55">
                        <div class="product-img default-overlay mb-20">
                            <a href="product-details.html">
                                <img class="default-img" src="assets/images/product/hm-1-pro-2.jpg" alt="">
                                <img class="hover-img" src="assets/images/product/hm-1-pro-2-2.jpg" alt="">
                                <span class="price-dec">-17.9%</span>
                            </a>
                            <div class="product-action">
                                <a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i
                                        class=" ti-zoom-in"></i><span>Quick Shop</span></a>
                                <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
                                <a title="Compare" href="#"><i class="ti-bar-chart-alt"></i><span>Add to Compare</span></a>
                            </div>
                            <div class="product-action-2">
                                <a title="Read more" href="product-details.html">Read more</a>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="product-details.html">Long shirt dress</a></h3>
                            <div class="product-price">
                                <span class="old">$60.00</span>
                                <span>$50.00</span>
                            </div>
                            <div class="product-rating">
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                                <i class=" fa fa-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                    <div class="product-wrap mb-55">
                        <div class="product-img default-overlay mb-20">
                            <a href="product-details.html">
                                <img class="default-img" src="assets/images/product/hm-1-pro-3.jpg" alt="">
                                <img class="hover-img" src="assets/images/product/hm-1-pro-3-2.jpg" alt="">
                            </a>
                            <div class="product-action">
                                <a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i
                                        class=" ti-zoom-in"></i><span>Quick Shop</span></a>
                                <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
                                <a title="Compare" href="#"><i class="ti-bar-chart-alt"></i><span>Add to Compare</span></a>
                            </div>
                            <div class="product-action-2">
                                <a title="Add To Cart" href="#">Add to cart</a>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="product-details.html">High Collar Jacket</a></h3>
                            <div class="product-price">
                                <span>$60.00</span>
                            </div>
                            <div class="product-rating">
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                                <i class=" fa fa-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                    <div class="product-wrap mb-55">
                        <div class="product-img default-overlay mb-20">
                            <a href="product-details.html">
                                <img class="default-img" src="assets/images/product/hm-1-pro-4.jpg" alt="">
                                <img class="hover-img" src="assets/images/product/hm-1-pro-4-2.jpg" alt="">
                            </a>
                            <div class="product-action">
                                <a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i
                                        class=" ti-zoom-in"></i><span>Quick Shop</span></a>
                                <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
                                <a title="Compare" href="#"><i class="ti-bar-chart-alt"></i><span>Add to Compare</span></a>
                            </div>
                            <div class="product-action-2">
                                <a title="View products" href="product-details.html">View products</a>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="product-details.html">Off-shoulder striped dress</a></h3>
                            <div class="product-price">
                                <span>$29.00</span>
                            </div>
                            <div class="product-rating">
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                    <div class="product-wrap mb-55">
                        <div class="product-img default-overlay mb-20">
                            <a href="product-details.html">
                                <img class="default-img" src="assets/images/product/hm-1-pro-5.jpg" alt="">
                                <img class="hover-img" src="assets/images/product/hm-1-pro-5-2.jpg" alt="">
                                <span class="out-of-stock">Out of stock</span>
                            </a>
                            <div class="product-action">
                                <a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i
                                        class=" ti-zoom-in"></i><span>Quick Shop</span></a>
                                <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
                                <a title="Compare" href="#"><i class="ti-bar-chart-alt"></i><span>Add to Compare</span></a>
                            </div>
                            <div class="product-action-2">
                                <a title="Add To Cart" href="#">Add to cart</a>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="product-details.html">Fine-knit cardigan</a></h3>
                            <div class="product-price">
                                <span>$80.00</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="banner-area">
        <div class="row no-gutters">
            <div class="col-lg-6 col-md-6">
                <div class="banner-wrap">
                    <a href="shop-4col.jsp"><img src="assets/images/banner/banner-3.jpg" alt="banner"></a>
                    <div class="banner-content-2">
                        <span>基本款棉毛衣</span>
                        <h2>降价 40%</h2>
                        <div class="banner-action-wrap">
                            <a href="product-details.jsp">
                                <div class="banner-action-normal banner-action-common">
                                    <span>去购买</span>
                                </div>
                                <div class="banner-action-hover banner-action-common">
                                    <span>去购买</span>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="banner-wrap">
                    <a href="product-details.html"><img src="assets/images/banner/banner-4.jpg" alt="banner"></a>
                    <div class="banner-content-2">
                        <span>拉链 皮革 化妆包</span>
                        <h2>降价 40%</h2>
                        <div class="banner-action-wrap">
                            <a href="shop-4col.jsp">
                                <div class="banner-action-normal banner-action-common">
                                    <span>去购买</span>
                                </div>
                                <div class="banner-action-hover banner-action-common">
                                    <span>去购买</span>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <%--    内容4--%>
    <div class="new-trend-area section-padding-2 pt-100 pb-45">
        <div class="container-fluid padding-30-row-col">
            <div class="section-title-3 text-center mb-70">
                <h2>大甩卖</h2>
            </div>
            <div class="row">
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                    <div class="product-wrap mb-55">
                        <div class="product-img default-overlay mb-20">
                            <a href="shop-4col.jsp">
                                <img class="default-img" src="assets/images/product/hm-4-pro-4.jpg" alt="">
                                <img class="hover-img" src="assets/images/product/hm-4-pro-4-2.jpg" alt="">
                            </a>
                            <div class="product-action">
                                <a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i
                                        class=" ti-zoom-in"></i><span>快速购买</span></a>
                                <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>添加到心愿单</span></a>
<%--                                <a title="Compare" href="#"><i class="ti-bar-chart-alt"></i><span>Add to Compare</span></a>--%>
                            </div>
                            <div class="product-action-2">
                                <a title="Buy on Themeforest" href="#">Buy on Themeforest</a>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="product-details.html">Wrap soft fabric blouse</a></h3>
                            <div class="product-price">
                                <span>$29.00</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                    <div class="product-wrap mb-55">
                        <div class="product-img default-overlay mb-20">
                            <a href="product-details.html">
                                <img class="default-img" src="assets/images/product/hm-4-pro-5.jpg" alt="">
                                <img class="hover-img" src="assets/images/product/hm-4-pro-5-2.jpg" alt="">
                            </a>
                            <div class="product-action">
                                <a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i
                                        class=" ti-zoom-in"></i><span>快速购买</span></a>
                                <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>添加到心愿单</span></a>
                            </div>
                            <div class="product-action-2">
                                <a title="Select options" href="#">Select options</a>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="product-details.html">Satin floral dress</a></h3>
                            <div class="product-price">
                                <span>$75.00</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                    <div class="product-wrap mb-55">
                        <div class="product-img default-overlay mb-20">
                            <a href="product-details.html">
                                <img class="default-img" src="assets/images/product/hm-1-pro-2.jpg" alt="">
                                <img class="hover-img" src="assets/images/product/hm-1-pro-2-2.jpg" alt="">
                            </a>
                            <div class="product-action">
                                <a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i
                                        class=" ti-zoom-in"></i><span>快速购买</span></a>
                                <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>添加到心愿单</span></a>
                            </div>
                            <div class="product-action-2">
                                <a title="Add To Cart" href="#">Add to cart</a>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="product-details.html">Slim-fit dark wash Patrick</a></h3>
                            <div class="product-price">
                                <span>$65.00</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                    <div class="product-wrap mb-55">
                        <div class="product-img default-overlay mb-20">
                            <a href="product-details.html">
                                <img class="default-img" src="assets/images/product/hm-1-pro-9.jpg" alt="">
                                <img class="hover-img" src="assets/images/product/hm-1-pro-9-2.jpg" alt="">
                            </a>
                            <div class="product-action">
                                <a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i
                                        class=" ti-zoom-in"></i><span>快速购买</span></a>
                                <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>添加到心愿单</span></a>
                            </div>
                            <div class="product-action-2">
                                <a title="Add To Cart" href="#">Add to cart</a>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="product-details.html">Slim-fit cotton shirt</a></h3>
                            <div class="product-price">
                                <span>$41.00</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                    <div class="product-wrap mb-55">
                        <div class="product-img default-overlay mb-20">
                            <a href="product-details.html">
                                <img class="default-img" src="assets/images/product/hm-4-pro-6.jpg" alt="">
                                <img class="hover-img" src="assets/images/product/hm-4-pro-6-2.jpg" alt="">
                                <span class="price-dec">-17.9%</span>
                            </a>
                            <div class="product-action">
                                <a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i
                                        class=" ti-zoom-in"></i><span>快速购买</span></a>
                                <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>添加到心愿单</span></a>
                            </div>
                            <div class="product-action-2">
                                <a title="Read more" href="product-details.html">Read more</a>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="product-details.html">Long shirt dress</a></h3>
                            <div class="product-price">
                                <span class="old">$60.00</span>
                                <span>$50.00</span>
                            </div>
                            <div class="product-rating">
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                                <i class=" fa fa-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                    <div class="product-wrap mb-55">
                        <div class="product-img default-overlay mb-20">
                            <a href="product-details.html">
                                <img class="default-img" src="assets/images/product/hm-1-pro-10.jpg" alt="">
                                <img class="hover-img" src="assets/images/product/hm-1-pro-10-2.jpg" alt="">
                            </a>
                            <div class="product-action">
                                <a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i
                                        class=" ti-zoom-in"></i><span>快速购买</span></a>
                                <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>添加到心愿单</span></a>
                            </div>
                            <div class="product-action-2">
                                <a title="Add To Cart" href="#">Add to cart</a>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="product-details.html">High Collar Jacket</a></h3>
                            <div class="product-price">
                                <span>$60.00</span>
                            </div>
                            <div class="product-rating">
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                                <i class=" fa fa-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                    <div class="product-wrap mb-55">
                        <div class="product-img default-overlay mb-20">
                            <a href="product-details.html">
                                <img class="default-img" src="assets/images/product/hm-4-pro-7.jpg" alt="">
                                <img class="hover-img" src="assets/images/product/hm-4-pro-7-2.jpg" alt="">
                            </a>
                            <div class="product-action">
                                <a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i
                                        class=" ti-zoom-in"></i><span>快速购买</span></a>
                                <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>添加到心愿单</span></a>
                            </div>
                            <div class="product-action-2">
                                <a title="View products" href="product-details.html">View products</a>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="product-details.html">Off-shoulder striped dress</a></h3>
                            <div class="product-price">
                                <span>$29.00</span>
                            </div>
                            <div class="product-rating">
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                                <i class="yellow fa fa-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                    <div class="product-wrap mb-55">
                        <div class="product-img default-overlay mb-20">
                            <a href="product-details.html">
                                <img class="default-img" src="assets/images/product/hm-1-pro-6.jpg" alt="">
                                <img class="hover-img" src="assets/images/product/hm-1-pro-6-2.jpg" alt="">
                                <span class="out-of-stock">Out of stock</span>
                            </a>
                            <div class="product-action">
                                <a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i
                                        class=" ti-zoom-in"></i><span>快速购买</span></a>
                                <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>添加到心愿单</span></a>
                            </div>
                            <div class="product-action-2">
                                <a title="Add To Cart" href="#">Add to cart</a>
                            </div>
                        </div>
                        <div class="product-content">
                            <h3><a href="product-details.html">Fine-knit cardigan</a></h3>
                            <div class="product-price">
                                <span>$80.00</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="feature-area bg-gray-2 pt-70 pb-40">
        <div class="custom-container-3">
            <div class="row">
                <div class="col-lg-4 col-md-4">
                    <div class="feature-wrap mb-30">
                        <div class="feature-icon f-icon-roted">
                            <i class="ti-shopping-cart"></i>
                        </div>
                        <div class="feature-content">
                            <h4>免运费 & 退货</h4>
                            <span>超过100美元的订单可免费送货</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4">
                    <div class="feature-wrap mb-30">
                        <div class="feature-icon">
                            <i class=" ti-headphone-alt"></i>
                        </div>
                        <div class="feature-content">
                            <h4>热线: (+85) 820 820 8820</h4>
                            <span>专业支持，我们随时为您提供全天候服务</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4">
                    <div class="feature-wrap mb-30">
                        <div class="feature-icon">
                            <i class=" ti-lock"></i>
                        </div>
                        <div class="feature-content">
                            <h4> 隐私保护 </h4>
                            <span>安全支付，支付信息保密</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="blog-area pt-100 pb-70">
        <div class="custom-container-2">
            <div class="section-title-3 text-center mb-70">
                <h2>最新的博客</h2>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-6">
                    <div class="blog-wrap mb-30">
                        <div class="blog-img mb-35">
                            <a href="blog-details.html"><img src="assets/images/blog/blog-1.jpg" alt="blog"></a>
                            <span><a href="#">技术</a></span>
                        </div>
                        <div class="blog-content text-center">
                            <h3><a href="blog-details.html">什么是E油？</a></h3>
                            <div class="blog-meta">
                                <ul>
                                    <li><a href="#">2020年1月21日</a></li>
                                    <li>来自 <a href="#">约翰·斯诺</a></li>
                                </ul>
                            </div>
                            <div class="blog-btn">
                                <a href="blog-details.html">更多</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6">
                    <div class="blog-wrap mb-30">
                        <div class="blog-img mb-35">
                            <a href="blog-details.html"><img src="assets/images/blog/blog-2.jpg" alt="blog"></a>
                            <span><a href="#">爱情故事</a></span>
                        </div>
                        <div class="blog-content text-center">
                            <h3><a href="blog-details.html">香水窍门</a></h3>
                            <div class="blog-meta">
                                <ul>
                                    <li><a href="#">2020年1月23日</a></li>
                                    <li>来自<a href="#">约翰·斯诺</a></li>
                                </ul>
                            </div>
                            <div class="blog-btn">
                                <a href="blog-details.html">更多</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6">
                    <div class="blog-wrap mb-30">
                        <div class="blog-img mb-35">
                            <a href="blog-details.html"><img src="assets/images/blog/blog-3.jpg" alt="blog"></a>
                            <span><a href="#">咖啡馆</a></span>
                        </div>
                        <div class="blog-content text-center">
                            <h3><a href="blog-details.html">猫屎咖啡的由来</a></h3>
                            <div class="blog-meta">
                                <ul>
                                    <li><a href="#">2020年1月27日</a></li>
                                    <li>来自<a href="#">约翰·斯诺</a></li>
                                </ul>
                            </div>
                            <div class="blog-btn">
                                <a href="#">更多</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="footer-area section-padding-1 bg-black pt-70">
        <div class="container-fluid">
            <div class="row">
                <div class="footer-column footer-width-32">
                    <div class="footer-widget mb-40">
                        <div class="footer-about">
                            <div class="footer-logo">
                                <a href="index.html"><img src="assets/images/logo/logo-white.png" alt="logo"></a>
                            </div>
                            <div class="footer-info">
                                <ul>
                                    <li><a href="#"> 1223324322@qq.com </a></li>
                                    <li> +85 820 820 8820</li>
                                    <li>沙坪坝 天陈路 28号</li>
                                </ul>
                            </div>
                            <div class="footer-social">
                                <ul>
                                    <li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a class="youtube" href="#"><i class="fa fa-youtube"></i></a></li>
                                    <li><a class="dribbble" href="#"><i class="fa fa-dribbble"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer-column footer-width-12">
                    <div class="footer-widget mb-40">
                        <div class="footer-title">
                            <h3>公司</h3>
                        </div>
                        <div class="footer-list">
                            <ul>
                                <li><a href="#">帮助</a></li>
                                <li><a href="#">退款</a></li>
                                <li><a href="#">礼品包装</a></li>
                                <li><a href="#">会员</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="footer-column footer-width-12">
                    <div class="footer-widget mb-40">
                        <div class="footer-title">
                            <h3>与我相关</h3>
                        </div>
                        <div class="footer-list">
                            <ul>
                                <li><a href="#">关于我们</a></li>
                                <li><a href="#">服务中心</a></li>
                                <li><a href="#">条款 & 条件</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="footer-column footer-width-12">
                    <div class="footer-widget mb-40">
                        <div class="footer-title">
                            <h3>快速链接</h3>
                        </div>
                        <div class="footer-list">
                            <ul>
                                <li><a href="#">收藏平</a></li>
                                <li><a href="#">尺码引导</a></li>
                                <li><a href="#">我的账户</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="footer-column footer-width-31">
                    <div class="footer-widget subscribe-right mb-40">
                        <div class="footer-title">
                            <h3>加入我们的新闻稿</h3>
                        </div>
                        <div id="mc_embed_signup" class="subscribe-form mt-20">
                            <form id="mc-embedded-subscribe-form" class="validate subscribe-form-style" novalidate=""
                                  target="_blank" name="mc-embedded-subscribe-form" method="post"
                                  action="http://devitems.us11.list-manage.com/subscribe/post?u=6bbb9b6f5827bd842d9640c82&amp;id=05d85f18ef">
                                <div id="mc_embed_signup_scroll" class="mc-form">
                                    <input class="email" type="email" required=""
                                           placeholder="输入你的邮箱地址..." name="EMAIL" value="">
                                    <div class="mc-news" aria-hidden="true">
                                        <input type="text" value="" tabindex="-1"
                                               name="b_6bbb9b6f5827bd842d9640c82_05d85f18ef">
                                    </div>
                                    <div class="clear">
                                        <input id="mc-embedded-subscribe" class="button" type="submit" name="subscribe"
                                               value="订阅">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="copyright text-center pt-25 pb-10">
                <p>© Payna商店所有权利 <a href="index.jsp" title="bootstrapmb">bootstrapMB</a></p>
            </div>
        </div>
    </footer>
    <div class="support-lists">
        <ul>
            <li><a href="#"><i class=" ti-comments "></i></a></li>
            <li><a href="#"><i class=" ti-headphone-alt "></i></a></li>
            <li><a href="#"><i class=" ti-email "></i></a></li>
        </ul>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="ti-close"
                                                                                                      aria-hidden="true"></span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row no-gutters">
                        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                            <div class="quickview-slider-active owl-carousel">
                                <img src="assets/images/product/quickview-1.jpg" alt="">
                                <img src="assets/images/product/quickview-2.jpg" alt="">
                            </div>
                            <!-- Thumbnail Large Image End -->
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                            <div class="quickview-content">
                                <h2>High Collar Jacket</h2>
                                <div class="quickview-ratting-review">
                                    <div class="quickview-ratting-wrap">
                                        <div class="quickview-ratting">
                                            <i class="yellow fa fa-star"></i>
                                            <i class="yellow fa fa-star"></i>
                                            <i class="yellow fa fa-star"></i>
                                            <i class="yellow fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                        </div>
                                        <a href="#"> (1 customer review)</a>
                                    </div>
                                    <div class="quickview-stock">
                                        <span><i class="fa fa-check-circle-o"></i> in stock</span>
                                    </div>
                                </div>
                                <h3>$29.00</h3>
                                <div class="quickview-peragraph">
                                    <p>Donec accumsan auctor iaculis. Sed suscipit arcu ligula, at egestas magna
                                        molestie a. Proin ac ex maximus, ultrices justo eget, sodales orci. Aliquam
                                        egestas libero ac turpis pharetra</p>
                                    <ul>
                                        <li>Composition: 50% cotton,45% polyester, 5% polyamide.</li>
                                        <li>Filling: 100% polyester.</li>
                                        <li>Hood fur: 64% acrylic,23% modacrylic,13% polyester</li>
                                    </ul>
                                </div>
                                <div class="quickview-action-wrap">
                                    <div class="quickview-quality">
                                        <div class="cart-plus-minus">
                                            <input class="cart-plus-minus-box" type="text" name="qtybutton" value="2">
                                        </div>
                                    </div>
                                    <div class="quickview-cart">
                                        <a title="Add to cart" href="#">Add to cart</a>
                                    </div>
                                    <div class="quickview-wishlist">
                                        <a title="Add to wishlist" href="#"><i class=" ti-heart "></i></a>
                                    </div>
                                    <div class="quickview-compare">
                                        <a title="Add to compare" href="#"><i class="ti-bar-chart-alt"></i></a>
                                    </div>
                                </div>
                                <div class="quickview-meta">
                                    <span>SKU: <span>REF. LA-103</span></span>
                                    <span>Categories: <a href="#">Fashions</a>, <a href="#">Main 03</a></span>
                                    <span>Tags: <a href="#">Coat</a>, <a href="#">Dresses</a>, <a
                                            href="#">Fashion</a></span>
                                </div>
                                <div class="default-social">
                                    <ul>
                                        <li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
                                        <li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
                                        <li><a class="youtube" href="#"><i class="fa fa-pinterest-p"></i></a></li>
                                        <li><a class="dribbble" href="#"><i class="fa fa-google-plus"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal end -->
</div>

<!-- JS
============================================ -->

<!-- Modernizer JS -->
<script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
<!-- Modernizer JS -->
<script src="assets/js/vendor/jquery-3.3.1.min.js"></script>
<!-- Popper JS -->
<script src="assets/js/vendor/popper.js"></script>
<!-- Bootstrap JS -->
<script src="assets/js/vendor/bootstrap.min.js"></script>
<!-- Revolution Slider JS -->
<script src="assets/js/revolution/js/jquery.themepunch.revolution.min.js"></script>
<script src="assets/js/revolution/js/jquery.themepunch.tools.min.js"></script>
<script src="assets/js/revolution/revolution-active.js"></script>
<!-- SLIDER REVOLUTION 5.0 EXTENSIONS  (Load Extensions only on Local File Systems !  The following part can be removed on Server for On Demand Loading) -->
<script src="assets/js/revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
<script src="assets/js/revolution/js/extensions/revolution.extension.carousel.min.js"></script>
<script src="assets/js/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
<script src="assets/js/revolution/js/extensions/revolution.extension.actions.min.js"></script>
<script src="assets/js/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script src="assets/js/revolution/js/extensions/revolution.extension.migration.min.js"></script>
<script src="assets/js/revolution/js/extensions/revolution.extension.navigation.min.js"></script>
<script src="assets/js/revolution/js/extensions/revolution.extension.parallax.min.js"></script>
<script src="assets/js/revolution/js/extensions/revolution.extension.video.min.js"></script>
<!-- Others JS -->
<!--<script src="assets/js/plugins/instafeed.js"></script>-->
<script src="assets/js/plugins/jquery-ui.js"></script>
<script src="assets/js/plugins/jquery-ui-touch-punch.js"></script>
<script src="assets/js/plugins/magnific-popup.js"></script>
<script src="assets/js/plugins/owl-carousel.js"></script>
<script src="assets/js/plugins/slick.js"></script>
<script src="assets/js/plugins/parallax.js"></script>
<script src="assets/js/plugins/paraxify.js"></script>
<script src="assets/js/plugins/countdown.js"></script>
<script src="assets/js/plugins/scrollup.js"></script>
<script src="assets/js/plugins/images-loaded.js"></script>
<script src="assets/js/plugins/isotope.js"></script>
<script src="assets/js/plugins/easyzoom.js"></script>
<script src="assets/js/plugins/sticky-sidebar.js"></script>
<script src="assets/js/plugins/tilt.js"></script>
<script src="assets/js/plugins/select2.min.js"></script>
<script src="assets/js/plugins/wow.js"></script>
<!-- Main JS -->
<script src="assets/js/main.js"></script>

</body>

</html>